<template>
	<view class="card menu">
		<view class="menu-item" @click="goPage('/pages/order/order', 'tab')">
			<view class="menu-icon">
				<text class="iconfont icon-anjian"></text>
				<!-- <image src="https://lvshi.haidanet.com/uni-static/lawyer/img/index/case.png"></image> -->
			</view>
			<view class="text">案件</view>
		</view>
		<view class="menu-item" @click="goPage('/query/index/index')">
			<view class="menu-icon">
				<text class="iconfont icon-gaojichaxun"></text>
				<!-- <image src="https://lvshi.haidanet.com/uni-static/lawyer/img/index/query.png"></image> -->
			</view>
			<view class="text">查询</view>
		</view>
		<view class="menu-item" @click="goPage('/collaborative/index/index')">
			<view class="menu-icon">
				<text class="iconfont icon-xietong-xuanzhong"></text>
				<!-- <image src="https://lvshi.haidanet.com/uni-static/lawyer/img/index/coordination.png"></image> -->
			</view>
			<view class="text">协同</view>
		</view>
		<view class="menu-item" @click="tips" v-if="xcxStatus != 0">
			<view class="menu-icon">
				<text class="iconfont icon-xuexi"></text>
				<!-- <image src="https://lvshi.haidanet.com/uni-static/lawyer/img/index/learning.png"></image> -->
			</view>
			<view class="text">学习</view>
		</view>
		<view class="menu-item" @click="tips" v-if="xcxStatus != 0">
			<view class="menu-icon">
				<text class="iconfont icon-fenxiang"></text>
				<!-- <image src="https://lvshi.haidanet.com/uni-static/lawyer/img/index/share.png"></image> -->
			</view>
			<view class="text">分享</view>
		</view>
		<view class="menu-item" @click="goPage('/tools/index/index')">
			<view class="menu-icon">
				<text class="iconfont icon-gongjuxiang"></text>
				<!-- <image src="https://lvshi.haidanet.com/uni-static/lawyer/img/index/toolbox.png"></image> -->
			</view>
			<view class="text">工具</view>
		</view>
	</view>
</template>

<script lang="ts">
	import { defineComponent, ref, computed } from 'vue';
	import useRouter from '@/hooks/useRouter.ts';
	import { useAppStore } from '@/store';
	export default defineComponent({
		name: 'Menu',
		setup(props, ctx) {
			const router = useRouter();
			const goPage = (url : string, type = 'push') => {
				if (type === 'push') {
					router.push(url);
				} else if (type === 'tab') {
					router.switchTab(url);
				}
			};
			const appStore = useAppStore();
			const xcxStatus = computed(() => appStore.config.xcx_status)
			const tips = () => {
				// uni.showToast({ title: '请先登录', icon: 'none' });
				uni.$wdToast.error('暂未开放');
			};
			return {
				goPage,
				xcxStatus,
				tips
			};
		}
	});
</script>

<style lang="less" scoped>
	.menu {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;
		background-color: #fff;
		border-radius: 13rpx;
		padding: 50rpx 40rpx;
		width: calc(100% - 80rpx);

		.menu-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.menu-icon {
				.iconfont {
					font-size: 50rpx;
				}

				color: #c91c1f;
			}

			.text {
				font-family: PingFang;
				font-weight: bold;
				font-size: 24rpx;
				color: #000000;
				margin-top: 10rpx;
			}
		}

		.menu-item:nth-child(2) {
			.menu-icon {
				.iconfont {
					font-size: 54rpx;
				}
			}
		}

		.menu-item:nth-child(4) {
			.menu-icon {
				.iconfont {
					font-size: 54rpx;
				}
			}
		}
	}
</style>